<template>
    <div class="system-table-container layout-pd">
        <el-card shadow="hover" class="layout-padding-auto">
          <el-timeline style="max-height: 250px;overflow-y: auto">
            <el-timeline-item
                v-for="(activity, index) in state.tableData.data"
                :key="index"
                :timestamp="activity.timestamp" placement="top"
            >
              <el-card style="margin-right: 20px" shadow="never">
                <h4>Update Github template</h4>
                <p>Tom committed 2018/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>

          <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                         class="mt15 paginationFlex" :pager-count="5" :page-sizes="[10, 20, 30]"
                         v-model:current-page="state.tableData.param.pageNum" background
                         v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                         :total="state.tableData.total">
          </el-pagination>
        </el-card>
    </div>
</template>

<script setup name="Log" lang="ts">
import {reactive, watch, nextTick} from "vue";
    import { listLog} from '@/leadmall/api/log';
    import { ElMessage } from 'element-plus';
    import {ProjectUserVO} from "@/leadmall/api/projectUser/types";

    const props = defineProps<{
      project: ProjectUserVO;
    }>();
    const state = reactive({
        tableData: {
            data: [] as any,
            total: 0 as any,
            loading: false,
            dateRange: [] as any,
            param: {
                pageNum: 1,
                pageSize: 10,
              projectId:undefined
            },
        }
    });
    /** 查询操作记录列表 */
    const getList = () => {
        state.tableData.loading = true;
      if(props.project?.topicId){
        state.tableData.param.projectId = props.project.topicId;
      }
        listLog(state.tableData.param).then((res)=>{
            if (res.code === 200) {
                state.tableData.data = res.rows;
                state.tableData.total = res.total;
            } else {
                ElMessage.error(res.msg);
            }
        }).catch(() => {
            ElMessage.error('获取数据失败');
        }).finally(() => {
            state.tableData.loading = false;
        });
    }
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.tableData.param.pageSize = val;
      getList();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.tableData.param.pageNum = val;
        getList();
    };
watch(
    () => props.project,
    () => {
      nextTick(() => {
        getList();
      });
    },
    { deep: true, immediate: true }
);
</script>
